<template>
  <div class="WanNingLiPanel" >

    <div class="view" :style="{height:viewHeight+'rem'}">
      <div class="datedate" @click="openDate()">
        <div class="backbtn" @click="backBtnClick()"></div>
        <div class="txt">{{dateDataList[0]}}年{{dateDataList[1]}}月</div>
        <div class="jtou"></div>
      </div>
      <div class="dateDay">
        <div :class="['countTxt',domgetClss(myDateInfo.hint_msg_colour_id)]">{{myDateInfo.hint_msg}}</div>
        <div class="day">
          <div class="xq">{{myDateInfo.xing_qi}}</div>
          <div class="xz">{{myDateInfo.xing_zuo}}</div>
          <img src="../../assets/img/wannli/shu.png" class="img">
          <div class="tday">
            <div class="left" style="transform: rotate(180deg)" @click="leftRightClick(0)"></div>
            <div class="txt">{{dateDataList[2]}}</div>
            <div class="left" @click="leftRightClick(1)"></div>
          </div>
          <img src="../../assets/img/wannli/shu.png" class="img">
          <div class="sj">{{myDateInfo.shi_jie[0].name}}  {{myDateInfo.shi_jie[0].shi_jie}}</div>
          <div class="jq">{{myDateInfo.jie_qi[0].name}}  {{myDateInfo.jie_qi[0].jie_qi_0}}{{myDateInfo.jie_qi[0].jie_qi_1}}{{myDateInfo.jie_qi[0].jie_qi_2}}</div>
        </div>
        <div class="nongli">
          <p>{{myDateInfo.gan_zhi_li[0].year}}年  {{myDateInfo.gan_zhi_li[0].month}}月  {{myDateInfo.gan_zhi_li[0].day}}日</p>
          <p>阴历:{{myDateInfo.nong_li[0].month}}月(小){{myDateInfo.nong_li[0].day}}</p>
        </div>
        <div :class="['shudiv',domgetClss(myDateInfo.hint_msg_colour_id)]">{{myDateInfo.you_li_sheng_xiao}}</div>
      </div>
      <div class="yujiDiv">
        <div class="item">
          <div class="ico">
            <img src="../../assets/img/wannli/yu.png">
          </div>
          <div class="nr">
            <div :class="['txtdiv',domgetClss(item.colour_id)]" v-for="(item,index) in myDataYuList" :key="index">
              <div class="title">{{item.name}}</div>
              <div class="txt">{{item.info}}</div>
            </div>

          </div>
        </div>
        <div class="item">
          <div class="ico">
            <img src="../../assets/img/wannli/ji.png">
          </div>
          <div class="nr">
            <div :class="['txtdiv',domgetClss(item.colour_id)]" v-for="(item,index) in myDataJiList" :key="index">
              <div class="title">{{item.name}}</div>
              <div class="txt">{{item.info}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="jxiongDiv">
        <div class="table">

          <ul class="title bottomborder">

              <li class="w1 rightborder">时辰</li>
              <li class="w2 rightborder">吉凶</li>
              <li class="w3 rightborder">利方</li>
              <li class="w1 rightborder">时辰</li>
              <li class="w2 rightborder">吉凶</li>
              <li class="w3">利方</li>


          </ul>
          <ul v-for="(itemList,index) in myDateXiongList" :key="index"
              :class="['timeul','bottomborder',(index%2===0?'timeulc1':'')]">
            <template v-for="(item,indexKey) in itemList" :key="indexKey">
              <li :class="['w1','rightborder',item.cls]">{{item.shi_chen}}</li>
              <li :class="['w2','rightborder',item.cls]">{{item.ji_xiong}}</li>
              <li :class="['w3','rightborder',item.cls]">{{item.li_fang}}</li>

            </template>

          </ul>
        </div>
      </div>
      <div class="xingDiv">
        <span style="padding-right: 0.2rem;">{{myDateMonth.moon_pattern_name}}:{{myDateMonth.moon_pattern_info}}</span>
        <span style="padding-left: 0.2rem;">{{myDateHouWu.ben_ri_wu_hou_name}}:{{myDateHouWu.ben_ri_wu_hou_info}}</span>
      </div>
      <div class="beizhuDiv">
        <div class="t1">备注说明:</div>
        <div>
          <p>1.红色代表吉祥喜庆,蓝色代表凶险暴戾,黑色为中平。</p>
          <p>2.利方使用:如果对应时辰要去的方位非利方，则先行至相反方向，在到达目的地，如果要去的时辰利方在西南，则先行至目的地的东北方，在折回目的地。;</p>
        </div>
      </div>

    </div>
  </div>
</template>



<style scoped>

.WanNingLiPanel{
  width: 7.5rem;background-color:#E8E8E8;
}
.view{
  position: relative;width: 7.5rem;overflow-y:auto;overflow-x:hidden;
}
.datedate{
  position: relative;font-weight: 600;font-size: 0.32rem;color: #000000;width: 100%;margin-top: 0.3rem;
  display:flex;display: -webkit-flex;flex-direction:row;justify-content:center;
}
.datedate .backbtn{
  position:absolute; background-image: url("../../assets/img/ui/backBtn.png");width: 0.14rem;height: 0.22rem;
  left: 0.15rem;margin-top:0.09rem;
}
.datedate .txt{
  line-height: 0.32rem;
}
.datedate .jtou{
  background-image: url("../../assets/img/wannli/jtou.png");width: 0.36rem;height: 0.36rem;transform: rotate(0deg);
}

.dateDay{
  position: relative;width: 7.3rem; background-color:#FFFFFF;border-radius:0.5rem;left: 0.1rem;margin-top: 0.3rem;
  padding-top: 0.2rem;padding-bottom: 0.2rem;
}
.dateDay .countTxt{
  position:relative;font-weight: 400;font-size: 0.28rem;
}
.dateDay .day{
  position: relative;width: 100%;padding-top: 0.2rem;
  display:flex;display: -webkit-flex;flex-direction:row;justify-content:center;
}
.dateDay .day .xq{
  position: relative;font-weight: 400;font-size: 0.22rem;color: #7D7D7D;width: 0.2rem;line-height: 0.3rem;height: 0.9rem;top:0.3rem;
}
.dateDay .day .xz{
  position: relative;font-weight: 400;font-size: 0.22rem;color: #7D7D7D;width: 0.2rem;line-height: 0.3rem;height: 0.9rem;top:0.3rem;
  padding-left: 0.3rem; padding-right: 0.3rem;
}
.dateDay .day .sj{
  position: relative;font-weight: 400;font-size: 0.22rem;color: #7D7D7D;width: 0.2rem;line-height: 0.3rem;    padding-left: 0.3rem;padding-right: 0.3rem;
}
.dateDay .day .jq{
  position: relative;font-weight: 400;font-size: 0.22rem;color: #7D7D7D;width: 0.2rem;line-height: 0.3rem;
}
.dateDay .day .img{
  position: relative;width: 0.04rem;height: 1.5rem;
}
.dateDay .day .tday{
  position: relative;width: 4rem;height: 1.5rem;
  display:flex;display: -webkit-flex;flex-direction:row;justify-content:center;align-items: center;
}

.dateDay .day .tday .left{
  position: relative;background-image: url("../../assets/img/wannli/lr.png");width: 0.16rem;height: 0.28rem;
}

.dateDay .day .tday .txt{
  position: relative;font-weight: 800;font-size: 1.5rem;color: #000000;    padding-left: 0.4rem;padding-right: 0.4rem;
}

.dateDay .nongli{
  position: relative;font-weight: 500;font-size: 0.28rem;color: #000000;width:100%;text-align:center;margin-top: 0rem;line-height: 0.36rem;
}

.dateDay .shudiv{
  position: relative;width: 6.9rem;height: 0.5rem;left: 0.2rem;line-height: 0.5rem;background-color: #F1F1F1;margin-top: 0.3rem;
  border-radius:0.5rem;font-weight: 400;font-size: 0.22rem;
}

.yujiDiv{
  position: relative;width: 7.3rem;height: 5.3rem;background-color:#FFFFFF;border-radius:0.5rem;left: 0.1rem;margin-top: 0.3rem;
  display:flex;display: -webkit-flex;flex-direction:row;align-items: center;justify-content:center;
}
.yujiDiv .item{
  position: relative;width: 3.4rem;height: 4.9rem;background-color:#F1F1F1;border-radius:0.5rem;margin-left: 0.1rem;margin-right: 0.1rem;
}
.yujiDiv .item .ico{
  position: relative;width: 100%;margin-top: 0.1rem;
}
.yujiDiv .item .ico img{
  position: relative;width: 0.7rem;height: 0.7rem;margin: auto;
}

.yujiDiv .item .nr{
  position: relative;margin-left: 0.1rem;height: 3.8rem;overflow-y:auto;overflow-x:hidden;
}

.yujiDiv .item .nr .txtdiv{
  position: relative;text-align: left;margin-top: 0.2rem;margin-right: 0.05rem;
}
.yujiDiv .item .nr .txtdiv .title{
  position: relative;font-weight: 600;
  font-size: 0.22rem;
}
.yujiDiv .item .nr .txtdiv .txt{
  position: relative; font-size: 0.2rem;
}


.jxiongDiv{
  position: relative;width: 7.3rem;height: 2.9rem;background-color:#FFFFFF;border-radius:0.5rem;left: 0.1rem;margin-top: 0.3rem;
}
.jxiongDiv .table{
  position: relative;background-color:#E6E6E6;width: 6.9rem;height: 2.56rem;left: 0.2rem;top:0.2rem;border-radius:0.2rem;
}
.jxiongDiv .table ul{
  display:flex;display: -webkit-flex;flex-direction:row;
}
.jxiongDiv .table .bottomborder{
  border-bottom-style:solid;border-width:0.01rem;border-color:rgba(255, 255, 255, 1);
}
.jxiongDiv .table .rightborder{
  border-right-style:solid;border-width:0.01rem;border-color:rgba(255, 255, 255, 1);
}
.jxiongDiv .table .w1{
  width: 2rem;
}
.jxiongDiv .table .w2{
  width: 0.6rem;
}
.jxiongDiv .table .w3{
  width: 0.85rem;
}
.jxiongDiv .table .title{
  position: relative;height: 0.4rem;line-height: 0.4rem;font-weight: 400;font-size: 0.2rem;color: #787878;width: 100%;
}

.jxiongDiv .table .timeul{
  position: relative;height: 0.35rem;line-height: 0.35rem;font-size: 0.2rem;width: 100%;
}

.jxiongDiv .table .timeulc1{
  background-color: #F1F1F1;
}


.beizhuDiv{
  position: relative;margin-top: 0.3rem;margin-left: 0.3rem;line-height: 0.3rem;font-weight: 400;text-align: left;
  font-size: 0.2rem;color: #313131;    margin-bottom: 0.3rem;

}

.beizhuDiv .t1{
  font-weight: 500;color: #020202;
}

.xingDiv{
  position: relative;margin-top: 0.3rem;background-color:#FFFFFF;border-radius:0.5rem;width: 7.3rem;height: 0.5rem;
  font-weight: 400;font-size: 0.22rem;color: #FF2424;line-height: 0.5rem;text-align: center;
}




.color_red{
  color: red;
}
.color_bla{
  color: black;
}
.color_bule{
  color: blue;
}


</style>

<script setup>
import {reactive,ref, onMounted, onBeforeUnmount, onUnmounted,watch,computed} from "vue";
import { useStore} from 'vuex';
import {useRoute, useRouter} from 'vue-router';

import Enum from "@/gamejs/Enum";
import Util from "@/gamejs/Util";

let store = useStore();
let router = useRouter();
let viewHeight=ref(17);
/*组件挂载完成后执行的函数；*/
onMounted(() => {
  console.log("WanNingLiPanel onMounted 万年历 ");
  let _h=Math.floor(document.body.clientHeight/(window._windSize/100))/100;
 // viewHeight.value=_h-store.state.bottomPanelHeight;
  viewHeight.value=_h;
  initDate();
});
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("WanNingLiPanel onUnmounted  卸载组件实例后");
  if(store.state.view.wannldateView!==Enum.view_status_0){
    store.state.view.wannldateView=Enum.view_status_0;
  }

});
function openDate(){
  store.state.view.wannldateView=Enum.view_status_1;
}

function initDate(){
  //console.log("WanNingLiPanel initDate:",new Date('2015-9-27').getDay() );
  if(store.state.wnldate.length===0){
    let _tdate=Util.getDateNow();
    store.state.wnldate=[_tdate.year,_tdate.month,_tdate.day,_tdate.hours,_tdate.minutes];
  }else{
    getSRSData(store.state.wnldate);
  }

}
let dateDataList=ref([]);

function getSRSData(dateList){
  console.log("WanNingLiPanel getSRSData:",dateList);
  dateDataList.value=dateList;

  let data={
    gl_year:dateList[0],
    gl_month:dateList[1],
    gl_day:dateList[2],
    gl_hour:dateList[3],
    gl_min:dateList[4],
    is_gong_li:1 //使用公历标志 1为公历时间，0为阴历时间
  }
  $.ajax({
   url:'https://zy.iqiju.com/g_almanac',
    type: 'GET',
    dataType: 'json',
    jsonp: "",
    cache: false,
    data: data,
    success: function(data) {
      console.log("WanNingLiPanel getSRSData 数据:",data.status,data);
      if(data.status==0){
        setSrsData(data.content);
      }else{

      }

    },
    error: function(xhr, textStatus, errorThrown) {
      console.log("网络错误!");

    }

  });
}

/**
 * 左右选择点击
 * @param type 0:左 1:右
 */
function leftRightClick(type){
  console.log('WanNingLiPanel leftRightClick',type);
  let date=Util.getDateNextDay(dateDataList.value[0],dateDataList.value[1],dateDataList.value[2],1,type);
  console.log('WanNingLiPanel leftRightClick',date);
  store.state.wnldate=[date.year,date.month,date.day,dateDataList.value[3],dateDataList.value[4]];
}


/**设置吉凶数组**/
function setJiXiongList(list){
  if(list==null)list=[1,2,3,4,5,6,7,8];
  let newList=[];
  let oldLen=0;
  if(list.length%2===1){
    oldLen=Math.floor(list.length/2)+1;
  }else{
    oldLen=Math.floor(list.length/2);
  }
 // console.log('WanNingLiPanel setJiXiongList',oldLen);
  for(let i=0;i<oldLen;i++){
    if(i>=list.length)break;
    let voitemList=[];
    voitemList.push(list[i]);
    list[i].cls=domgetClss(list[i].colour_id);
    if((i+oldLen)<list.length){
      list[i+oldLen].cls=domgetClss(list[i+oldLen].colour_id);
      voitemList.push(list[(i+oldLen)]);
    }
    newList.push(voitemList);
  }
  //console.log('WanNingLiPanel setJiXiongList',newList );
  return newList;
}
function backBtnClick(){
  console.log("WanNingLiPanel backBtnClick");
  router.go(-1);
}
let dateData_new=computed(()=>{return store.state.wnldate;});
watch(dateData_new,(newValue,oldValue)=>{
  console.log('WanNingLiPanel watch',newValue );
  if(dateData_new!=null){
    getSRSData(store.state.wnldate);
  }

});
/**colour_id表示字体颜色 1为红色， 2为蓝色，3为黑色**/
function domgetClss(type){
    let colorL=['','color_red','color_bule','color_bla'];
    return colorL[type];
}

function setSrsData(data){
  //console.log("WanNingLiPanel setSrsData 处理数据",data.yi_info);
  for(let key in myDateMonth){
    if(data.moon_pattern==null)break;
    if(data.moon_pattern[key]!=null)myDateMonth[key]=data.moon_pattern[key];
  }
  for(let key in myDateHouWu){
    if(data.ben_ri_wu_hou==null)break;
    if(data.ben_ri_wu_hou[key]!=null)myDateHouWu[key]=data.ben_ri_wu_hou[key];
  }
  for(let key in myDateInfo){
    if(data.li_fa_info==null)break;
    if(data.li_fa_info[key]!=null)myDateInfo[key]=data.li_fa_info[key];
  }
  myDataYuList=[data.yi_info.da_shi_yi[0],data.yi_info.fang_wei_yi[0],data.yi_info.xing_yun_se[0],data.yi_info.xing_yun_num[0],data.yi_info.xing_yun_sheng_xiao[0]];
 // console.log("WanNingLiPanel setSrsData 处理数据 myDateInfo",myDateInfo);
  myDataJiList=[data.ji_info.da_shi_ji[0],data.ji_info.fang_wei_ji[0],data.ji_info.bei_yun_se[0],data.ji_info.bei_yun_num[0],data.ji_info.bei_yun_sheng_xiao[0]];
  myDateXiongList=setJiXiongList(data.ji_xiong_info.ji_xiong_list);
}


let myDateInfo=reactive({shi_jie:[{name:'',shi_jie:''}],jie_qi:[{name:'',jie_qi_0:'',jie_qi_1:'',jie_qi_2:''}],gan_zhi_li:[{year:'',month:'',day:''}],
  nong_li:[{year:'',month:'',day:''}],gong_li:[],hint_msg:'',hint_msg_colour_id:'',sheng_xiao:'',xing_qi:'',xing_zuo:'',you_li_ming:'',you_li_sheng_xiao:''});
let myDataYuList=reactive([]);
let myDataJiList=reactive([]);
let myDateXiongList=reactive([]);
let myDateMonth=reactive({moon_pattern_info:'',moon_pattern_name:''});
let myDateHouWu=reactive({ben_ri_wu_hou_info:'',ben_ri_wu_hou_name:''});
</script>
